<template>
	<view class="uni-swiper-page">
		<list ref="list" class="list" :offset-accuracy="5" :bounce="true" isSwiperList="true" :show-scrollbar="false">
			<cell class="list-items" v-for="(item) in categoryList" :key="item.bankId" :ref="'item'+item.bankId">
				<uni-collapse class="list-item" accordion>
					<uni-collapse-item :show-animation="true" :title="item.categoryName" title-border="auto">
						<template v-slot:title>
							<uni-section titleFontSize="15" class="mb-10" :title="item.categoryName" type="line"></uni-section>
						</template>
						<view class="content">
							<uni-list>
								<uni-list-item v-for="(subItem) in item.chapterList" class="list-item-pos"
									:title="subItem.chapterName" :right-text="`共${subItem.questionCount}题`"
									:show-arrow=true :clickable=true :disabled="subItem.questionCount == 0"
									@click="onClick(subItem)">
									<template v-slot:header>
										<view class="slot-box">
											<uni-icons color="#999" type="smallcircle-filled" size="7"></uni-icons>
										</view>
									</template>
									<template v-slot:body>
										<text class="slot-box slot-text">{{subItem.chapterName}}</text>
									</template>
								</uni-list-item>
							</uni-list>
						</view>

					</uni-collapse-item>
				</uni-collapse>
			</cell>
			<cell class="loading"></cell>
		</list>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		onMounted,
		watch,
		getCurrentInstance,
	} from 'vue'
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	const props = defineProps({
		parentId: {
			type: String,
			default: ''
		}
	})
	const scrollable = ref(true)
	const categoryList = ref([])
	const value = ref(['0'])

	const loadCategoryList = async (id) => {
		let result = await proxy.Request({
			url: proxy.Api.loadCategoryList,
			params: {
				id
			},
			showLoading: false,
		});
		if (!result) {
			return;
		}
		categoryList.value = result.data;
	};
	const onClick = (item) => {
		if (item.questionCount == 0) return
		//设置传参类型为0代表该次传递的id为章节id
		item.type = 0
		uni.navigateTo({
			url: `../parctise/PractiseQuestion?item=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	const setScrollRef = (height) => {
		if (this.$refs['list'].setSpecialEffects) {
			this.$refs['list'].setSpecialEffects({
				id: this.parentId,
				headerHeight: height
			});
		}
	}
	onLoad(() => {
		loadCategoryList(props.parentId)
	})
	watch(() => props.parentId, (newVal, oldVal) => {
		if (newVal != oldVal) {
			loadCategoryList(newVal)
		}
	})
</script>

<style scoped>
	.uni-swiper-page {
		flex: 1;
		position: relative;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.list {
		flex: 1;
		background-color: #ebebeb;
	}

	.list-item {
		padding: 5px;
		background-color: #fff;
	}

	/* 	.list-item-pos {
		margin-left: 15px;
	} */

	.loading {
		height: 20px;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}


	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #999;
		margin-right: 10px;
		margin-left: 10px;
	}
</style>